<template>
    <div class="register">
      <p class="title">登录</p>
      <br />
      <div class="ff">
        <input type="text" id="phone" placeholder="手机号" />
        <input type="password" id="pwd" placeholder="密码" />
        <button onclick="fun()">登录</button>
        <a href="./register.html">没有账号,点击去注册!</a>
      </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      imgUrl:"../assets/img/海.jpg",
    }
  },
}
</script>

<style scoped>
    * {
        padding: 0;
        margin: 0;
        text-decoration: none;
      }
      body {
        background: url("../assets/img/海.jpg");
        background-image: linear-gradient(to left,rgb(0,120,212), rgb(255, 255, 255));
        background-size: cover;
        background-repeat: no-repeat;
      }
      .register {
        width: 500px;
        height: 550px;
        background: url("../assets/img/海.jpg");
        margin: 80px auto 0;
        position: relative;
      }
      .title {
        color: rgb(106, 106, 106);
        font-size: 30px;
        letter-spacing: 10px;
        position: absolute;
        left: 220px;
        top: 50px;
        font-family: "黑体";
      }
      .ff {
        margin-top: 80px;
      }
      input {
        border-style: none;
        margin: 20px 35px;
        outline: none;
        width: 420px;
        height: 50px;
        padding-left: 30px;
        box-sizing: border-box;
      }
      input::placeholder {
        color: rgb(180, 174, 174);
        font-size: 18px;
        font-family: "黑体";
        letter-spacing: 5px;
        padding-left: 20px;
      }
      button {
        width: 210px;
        height: 42px;
        background-image: linear-gradient(
          to left,
          rgb(0, 137, 151),
          rgb(3, 106, 165)
        );
        border-style: none;
        border-radius: 50px;
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-family: "黑体";
        margin: 30px 140px;
      }
      a {
        display: block;
        text-align: center;
        color: azure;
      }
</style>